<template>
  <div>
    <div class="productAttr" :class="attr.activeAttr === true ? 'on' : ''">
      <div class="picTxt acea-row row-between-wrapper">
        <div class="iconfont icon-guanbi2" @click="closeAttr"></div>
        <div class="pictrue"><img :src="attr.productSelect.image" /></div>
        <div class="text">
          <div class="name line1">{{ attr.productSelect.store_name }}</div>
          <div>
            <span class="money font-color-orange"
              >¥<span class="num">{{ attr.productSelect.price }}</span></span
            ><span class="stock">库存: {{ attr.productSelect.stock }}</span>
          </div>
        </div>
      </div>
      <div class="openlist">
        <div
          class="item"
          v-for="(item, indexw) in attr.productAttr"
          :key="indexw"
        >
          <div class="name">{{ item.attr_name }}：</div>
          <div class="list acea-row row-middle">
            <div
              class="items acea-row row-center-wrapper"
              :class="item.index === indexn ? 'cart-color-green' : ''"
              v-for="(itemtxt, indexn) in item.attr_value"
              :key="indexn"
              @click="specitem(indexw, indexn)"
            >
              {{ itemtxt.attr }}
            </div>
          </div>
        </div>
      </div>
      <div class="bottom acea-row row-between-wrapper">
        <div class="specs">
          已选规格：<span class="specsVal">{{ attr.productSelect.specs }}</span>
        </div>
        <div
          class="but"
          :class="
            attr.productSelect.stock > 0 ? 'bg-color-main' : 'bg-color-gray'
          "
          @click="joinCart"
          v-if="attr.productSelect.cart_num < 1"
        >
          加入购物车
        </div>
        <div class="cart acea-row row-center-wrapper" v-else>
          <div class="iconfont icon-jian" @click="attrReduce"></div>
          <div class="cart-num">{{ attr.productSelect.cart_num }}</div>
          <div
            class="iconfont icon-jia font-color-main"
            :class="
              attr.productSelect.cart_num >= attr.productSelect.stock
                ? 'on'
                : ''
            "
            @click="joinCart"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      v-bind:hidden="attr.activeAttr === false"
      @click="closeAttr"
    ></div>
  </div>
</template>
<style scoped>
.productAttr {
  position: fixed;
  width: 6rem;
  background-color: #fff;
  top: 2.87rem;
  left: 50%;
  margin-left: -3rem;
  z-index: 111;
  border-radius: 0.12rem;
  font-size: 0.3rem;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
}
.productAttr.on {
  opacity: 1;
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}
.productAttr .picTxt {
  padding: 0.3rem;
  position: relative;
}
.productAttr .picTxt .pictrue {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.1rem;
}
.productAttr .picTxt .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.productAttr .picTxt .text {
  width: 3.58rem;
}
.productAttr .picTxt .text .name {
  font-size: 0.32rem;
  color: #202020;
  margin-bottom: 0.5rem;
}
.productAttr .picTxt .text .money {
  font-size: 0.24rem;
}
.productAttr .picTxt .text .money .num {
  font-size: 0.36rem;
}
.productAttr .picTxt .text .stock {
  font-size: 0.25rem;
  color: #999;
  margin-left: 0.2rem;
}
.productAttr .title {
  color: #666;
  padding: 0 0.95rem;
  height: 0.85rem;
  line-height: 0.85rem;
}
.productAttr .openlist {
  max-height: 3.2rem;
  overflow-y: auto;
  margin-top: 0.15rem;
  overflow-x: hidden;
}
.productAttr .openlist .item .name {
  padding: 0 0.25rem;
  color: #333;
}
.productAttr .openlist .item .list {
  padding: 0 0 0.2rem 0.25rem;
  margin-top: 0.2rem;
}
.productAttr .openlist .item .list .items {
  margin-right: 0.19rem;
  color: #999;
  height: 0.58rem;
  min-width: 1.26rem;
  padding: 0 0.15rem;
  border: 1px solid #bfbfbf;
  border-radius: 0.07rem;
  margin-bottom: 0.18rem;
  font-size: 0.26rem;
}
.productAttr .openlist .item ~ .item {
  margin-top: 0.15rem;
}
.productAttr .bottom {
  width: 100%;
  height: 0.97rem;
  background-color: #f5f5f5;
  border-radius: 0 0 0.15rem 0.15rem;
  padding: 0 0.18rem 0 0.24rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.productAttr .bottom .but {
  font-size: 0.26rem;
  color: #fff;
  width: 1.9rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
}
.productAttr .bottom .cart .iconfont {
  font-size: 0.45rem;
  color: #999;
}
.productAttr .bottom .cart .iconfont.on {
  color: #ddd !important;
}
.productAttr .bottom .cart .cart-num {
  width: 0.6rem;
  text-align: center;
  font-size: 0.28rem;
}
.productAttr .bottom .specs {
  color: #999;
  font-size: 0.25rem;
}
.productAttr .bottom .specs .specsVal {
  color: #333;
}
.productAttr .icon-guanbi2 {
  position: absolute;
  top: -0.9rem;
  right: -0.1rem;
  z-index: 99;
  font-size: 0.6rem;
  color: #fff;
}
.mask {
  z-index: 100;
}
</style>
<script>
export default {
  name: "ProductAttr",
  components: {},
  props: {
    attr: {
      type: Object,
      default: () => {}
    }
  },
  data: function() {
    return {};
  },
  mounted: function() {},
  methods: {
    specitem: function(indexw, indexn) {
      this.$set(this.attr.productAttr[indexw], "index", indexn);
      let value = this.getCheckedValue()
        .sort()
        .join(",");
      this.$emit("changeattr", value);
    },
    //获取被选中属性；
    getCheckedValue: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        for (let j = 0; j < productAttr[i].attr_values.length; j++) {
          if (productAttr[i].index === j) {
            value.push(productAttr[i].attr_values[j]);
          }
        }
      }
      return value;
    },
    closeAttr: function() {
      this.$emit("myattr", false);
    },
    joinCart: function() {
      if (this.attr.productSelect.stock > 0) {
        this.$emit("gocat", false);
      }
    },
    attrReduce: function() {
      this.$emit("attrreduce");
    }
  }
};
</script>
